<template>
  <div class="pagestyle" style="display: flex;">
    <div v-if="fromIndexpointId" style="width: 382px;">
      <querybox :queryList="state.options.queryList.querys" @query="query"></querybox>
    </div>
    <topbottomCom :optionsquery="1">
      <template v-slot:dragTopSlot>
        <list_controller @query="query" ref="zujianname" :options="state.options" @cellClickEvent="cellClickEvent"
          :showCaozuo="state.showCaozuo">
          <template v-slot:opraCurdBtnAll>
            <!-- <span :class="
                state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(1)">
              <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon" icon-class="qiehuan" />
              实时断电异常
            </span> -->
            <span :class="state.listBtnType == 7 ? 'listInfoBtn active' : 'listInfoBtn'" @click="listInfoBtnClick(7)">
              <svg-icon :class="state.listBtnType == 7 ? 'active' : ''" 
              class-name="search-icon" icon-class="tongjishuju" />
              统计数据
            </span>
          </template>
          <template v-slot:selectNamelist> 历史声光报警 </template>
        </list_controller>
      </template>
      <template v-slot:dragBottomSlot>
        <list_controller ref="zujiannametwo" :descQuery="state.descObj" :options="state.optionstwo"
         @pagechange="pagechange">
          <template v-slot:opraCurdBtnlist="row">
            <span>
              <el-button class="tableFontSize" type="primary" link size="small" @click="lookBtn(row.row.row)">填写
              </el-button>
              <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)"
                v-if="row.row.row.templateDto != null">查看</el-button>
            </span>
          </template>
          <template v-slot:opraCurdBtnAll>
            <span :class="
                state.listBtnType == 2 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(2)">
              <svg-icon :class="state.listBtnType == 2 ? 'active' : ''"
               class-name="search-icon" icon-class="quxian-g77hanc6" />
              查看曲线
            </span>
          </template>
          <template v-slot:selectNamelist> 详细信息(总计) </template>
        </list_controller>
      </template>
    </topbottomCom>
    <!--  -->
    <ayasdataCom style="width: 21.5%" v-if="state.listBtnType == 7" @close="close">
      <template v-slot:ayasContent>
        <ayasCardCom title="区域统计" :list="state.ayasObjData.oneList.length">
          <template v-slot:operatecontent>
            <div class="ayasTableListBox">
              <div class="tableTop" style="display: flex;justify-content: space-between;padding: 6px 0;">
                <span></span><span>所在区域</span><span>有主断电</span><span>无主断电</span>
              </div>
              <div style="height: 300px;overflow-y: auto;">
                <div class="tableBottom" style="padding: 6px 0;display: flex;justify-content: space-between;"
                  v-for="(item,index) in state.ayasObjData.oneList">
                  <span><em :style="{backgroundColor:index==0?'rgba(255, 85, 85, 1)':index==1?'rgba(255, 163, 71, 1)':
                  index==2?'rgba(252, 205, 4, 1)':'',
                  }"><i
                        :style="{color:index==0||index==1||index==2?'#fff':''}">{{ index+1 }}</i></em></span><span>{{ item.areaName }}</span><span>{{ item.powerOutageNum }}</span><span>{{ item.powerSupplyNum }}</span>
                </div>
              </div>
            </div>
          </template>
        </ayasCardCom>
        <ayasCardCom title="区域断电次数" :list="state.ayasObjData.oneList.length">
          <template v-slot:operatecontent>
            <div id="chartBoxs" style="height: 200px;">
            </div>
          </template>
        </ayasCardCom>
        <ayasCardCom title="设备断电次数排行" :list="state.ayasObjData.twoList.length">
          <template v-slot:operatecontent>
            <div id="chartBox" style="height: 200px;">
            </div>
          </template>
        </ayasCardCom>
        <ayasCardCom title="单次断电时长排行" :list="state.ayasObjData.fourList.length">
          <template v-slot:operatecontent>
            <div id="chartBoxt" style="height: 200px;">
            </div>
          </template>
        </ayasCardCom>
      </template>
    </ayasdataCom>
    <!-- 填写分析 -->
    <fillayaCom :fillayaComShow="state.fillayaComShow" @submitFormfillayaCom="submitFormfillayaCom"
      :tempList="state.tempList"></fillayaCom>
    <!-- 查看曲线 -->
    <chartCom :openChart="state.showChart" :data="state.chartData" @closeChart="closeChart">
    </chartCom>
    <!-- 查看分析 -->
    <ayadetailCom :detailsList="state.detailsList" :detailsShow="state.detailsShow"></ayadetailCom>
  </div>
</template>
<script setup>
  import querybox from "@/components/commonCom/querybox"; //用于首页抽屉查询处理
  import topbottomCom from "./listCom/topbottomCom.vue";
  import list_controller from "@/components/commonCom/list_controller";
  import fillayaCom from "./listCom/fillayaCom.vue";
  import ayadetailCom from "./listCom/ayadetailCom.vue";
  import chartCom from "./listCom/chartCom.vue";
  import ayasdataCom from "./listCom/ayasdataCom.vue";
  import ayasCardCom from "./listCom/ayasCardCom.vue";
  import {
    nextTick,
    computed,
    onMounted,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import dayjs from "dayjs";
  import * as echarts from "echarts";
  import {
    searchareaTree
  } from "@/api/config";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP;
  const upload = ref(null);
  // 首页查询抽屉传值
  const props = defineProps({
    fromIndexpointId: Object
  })
  let state = reactive({
    ayasObjData: {
      rightayasSelType: 'S',
      oneList: [],
      twoList: [],
      twoObj: {},
      threeSelType: 'S',
      threeList: [],
      fourList: []
    },
    detailsShow: false,
    detailsList: [],
    tempList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    options: {
      tableheads: computed(() => table_headers.hisVoiceAlarmStatistic), //模拟量
      // tableheadstwo: computed(() => table_headers.hisPointCutSwitchStatistic), //开关量
      queryList: {
        queryTitle: '选择测点',
        autoSearch: props.fromIndexpointId ? true : undefined,
        querys: [{
            fieldsearch: "conditionType",
            field: "conditionType",
            title: "查询方式",
            type: "radiospecial",
            binddata: 1,
            options: [{
                label: "时间查询",
                value: 1,
              },
              {
                label: "班次查询",
                value: 2,
              },
            ],
          },
          {
            field: ["cutStartTime", "cutEndTime"],
            fieldsearch: ["cutStartTime", "cutEndTime"],
            title: "时间范围",
            col: 12,
            type: "datetimestartEnd",
            binddata: [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss.000'), dayjs().format(
              'YYYY-MM-DD HH:mm:ss.000')],
            typespecial: 2,
            show: false,
          },
          {
            field: "datetime",
            fieldsearch: "datetime",
            title: "日期",
            type: "datetime",
            binddata: dayjs().format('YYYY-MM-DD'),
            typespecial: 1,
            show: true,
          },
          {
            fieldsearch: "banci",
            field: "banci",
            title: "班次选择",
            type: "selectspecial",
            binddata: "",
            options: [],
            typespecial: 1,
            show: true,
          },
          {
            field: "area",
            title: "所在区域",
            type: "cascaderRadionarmal",
            binddata: "",
            options: [],
            props: {
              children: "childList",
              value: "areaName",
              label: "areaName",
              checkStrictly: true,
              emitPath: false,
            },
          },
          {
            field: "condition",
            fieldSpecial: "condition",
            title: "测点类型",
            clearValue:true,//是否可以清空表单
            type: "cascaderRadio",
            binddata: props.fromIndexpointId&&props.fromIndexpointId.pointId.includes('D')?"D":'A',
            options: [],
            props: {
              children: "children",
              value: "code",
              label: "name",
              checkStrictly: true,
              emitPath: false,
            },
          },
          {
            fieldsearch: ["sensorName", "pointId", "place"],
            field: ["sensorName", "pointId", "place"],
            title: "选择测点",
            type: "cascaderRadioSpecial",
            binddata: "",
            options: [],
            props: {
              children: "children",
              value: "commonField",
              label: "commonField",
              checkStrictly: true,
              emitPath: false,
            },
          },

          {
            field: "calibrationStatus",
            title: "数据",
            type: "radio",
            binddata: 3,
            options: [{
                label: "全部",
                value: 3,
              },
              {
                label: "断电",
                value: 2,
              },
              {
                label: "标校",
                value: 1,
              },
            ],
          },
          {
            field: "isOpen",
            title: "高级搜索",
            type: "switchgaoji",
            binddata: false,
          },
          {
            field: "alarmDurationTime",
            titlegaoji: "断电时长",
            type: "selectSenior",
            binddata: "",
            options: [{
                label: '1分钟',
                value: 1,
              },
              {
                label: '3分钟',
                value: 3,
              },
              {

                label: '5分钟',
                value: 5,
              },
              {
                label: "10分钟以上",
                value: 10,
              },
            ],
            show: true,
          },
          {
            field: "alarmExtremum",
            titlegaoji: "断电极值",
            type: "inputSenior",
            binddata: "",
            options: [],
            show: true,
          },
          {
            field: "measureMessage",
            titlegaoji: "断电措施",
            type: "inputSenior",
            binddata: "",
            options: [],
            show: true,
          },
          {
            field: "isShowLocal",
            title: "只显示当前测点",
            type: "elcheckbox",
            binddata: false,
          },
          {
            field: "controlPointType",
            title: "",
            type: "yincang",
            binddata: 2,
          }
        ],
      },
      dataUrl: "/hisPointCut/listPointCuts",
    },
    optionstwo: {
      queryList: {
        detailListSear: true,
        autoSearch: true,
        querys: [],
      },
      tableheads: computed(() => table_headers.hisVoiceAlarmDetail), //模拟量详情
      // tableheadstwo: computed(() => table_headers.hisPointCutSwitchDetail), //开关量详情
      dataUrl: "/hisPointCut/getCutPointByPointId",
    },
    editId: undefined,
    banciList: [],
    showCaozuo: true,
    data: {},
    areaObj: {
      condition: props.fromIndexpointId&&props.fromIndexpointId.pointId.includes('D')?"D":'A',
      flag: "hisPointCut",
      isShowLocal: false
    },
    descObj: {},
    showChart: false,
    chartData: {},
  });
  // 统计数据接口

  let chartBox, chartBoxt, chartBoxs

  function setC3(xdata, data) {
    var plantCap = data

    var datalist = [{
        offset: [56, 48],
        symbolSize: 120,
        opacity: 0.95,
        color: "#f467ce",
      },
      {
        offset: [35, 80],
        symbolSize: 95,
        opacity: 0.88,
        color: "#7aabe2",
      },
      {
        offset: [20, 43],
        symbolSize: 90,
        opacity: 0.84,
        color: "#ff7123",
      },
      {
        offset: [83, 30],
        symbolSize: 90,
        opacity: 0.8,
        color: "#ffc400",
      },
      {
        offset: [36, 20],
        symbolSize: 65,
        opacity: 0.75,
        color: "#5e333f",
      },
      {
        offset: [64, 10],
        symbolSize: 70,
        opacity: 0.7,
        color: "#6b3442",
      },
      {
        offset: [75, 75],
        symbolSize: 60,
        opacity: 0.68,
        color: "#8a3647",
      },
      {
        offset: [88, 62],
        symbolSize: 50,
        opacity: 0.6,
        color: "#68333f",
      },
    ];
    var datas = [];
    for (var i = 0; i < plantCap.length; i++) {
      var item = plantCap[i];
      var itemToStyle = datalist[i];
      datas.push({
        name: item.value + "\n" + item.name,
        value: itemToStyle.offset,
        symbolSize: itemToStyle.symbolSize,
        label: {
          normal: {
            textStyle: {
              fontSize: 11,
            },
          },
        },
        itemStyle: {
          normal: {
            color: itemToStyle.color,
            opacity: itemToStyle.opacity,
          },
        },
      });
    }
    let option = {
      grid: {
        show: false,
        top: 10,
        bottom: 10,
      },
      xAxis: [{
        gridIndex: 0,
        type: "value",
        show: false,
        min: 0,
        max: 100,
        nameLocation: "middle",
        nameGap: 5,
      }, ],
      yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: "middle",
        nameGap: 30,
      }, ],
      series: [{
        type: "scatter",
        symbol: "circle",
        symbolSize: 120,
        label: {
          normal: {
            show: true,
            formatter: "{b}",
            color: "#fff",
            textStyle: {
              fontSize: "20",
            },
          },
        },
        itemStyle: {
          normal: {
            color: "#00acea",
          },
        },
        data: datas,
      }, ],
    };

    chartBoxs.setOption(option, true)
  }

  function setC1(xdata, data) {
    let option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        top: 30,
        bottom: 25,
        left: 40,
        right: 0
      },
      xAxis: [{
        type: "category",
        axisLine: {
          lineStyle: {
            color: "rgba(62, 70, 79, 1)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "rgba(62, 70, 79, 1)",
          fontSize: 18,
        },
        data: xdata,
      }],
      yAxis: [{
        type: "value",
        name: '次数',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "rgba(62, 70, 79, 1)",
        },
        splitArea: {
          show: false,
        },
      }, ],
      series: [{
        type: "bar",
        barMaxWidth: 35,
        barGap: "10%",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0,
                  color: "rgba(81, 172, 232, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(81, 172, 232, .2)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        data: data,
      }],
    };
    chartBox.setOption(option, true)
  }

  function setC2(xdata, data) {
    let option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        top: 30,
        bottom: 25,
        left: 40,
        right: 0
      },
      xAxis: [{
        type: "category",
        axisLine: {
          lineStyle: {
            color: "rgba(62, 70, 79, 1)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "rgba(62, 70, 79, 1)",
          fontSize: 18,
        },
        data: xdata,
      }],
      yAxis: [{
        type: "value",
        name: '次数',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "rgba(62, 70, 79, 1)",
        },
        splitArea: {
          show: false,
        },
      }, ],
      series: [{
        type: "line",
        itemStyle: {
          normal: {
            color: 'rgba(68, 170, 255, 1)'
          },
        },
        data: data,
      }],
    };
    chartBoxt.setOption(option, true)
  }

  function getlistAlarmInfoStatistic() {
    axios.post('/hisPointCut/listCutAreaStatistic', {
      cutStartTime: state.options.queryList.querys[1].binddata[0],
      cutEndTime: state.options.queryList.querys[1].binddata[0],
      flag: 'B'
    }).then(res => {
      state.ayasObjData.twoList = res.data
      let xdata = res.data.map(item => {
        return item.sensorName + '\n' + item.pointId
      })
      let data = res.data.map(item => {
        return item.cutNum
      })

      nextTick(() => {
        chartBox = echarts.init(document.getElementById("chartBox"));
        setC1(xdata, data)
      })
    })
  }

  function getattainRealAreaInfo2() {
    axios.post('/hisPointCut/listCutAreaStatistic', {
      cutStartTime: state.options.queryList.querys[1].binddata[0],
      cutEndTime: state.options.queryList.querys[1].binddata[0],
      flag: 'C'
    }).then(res => {
      state.ayasObjData.fourList = res.data
      let xdata = state.ayasObjData.fourList.map(item => {
        return item.sensorName
      })
      let data = state.ayasObjData.fourList.map(item => {
        return item.cutAccumulationTime
      })
      nextTick(() => {
        chartBoxt = echarts.init(document.getElementById("chartBoxt"));
        setC2(xdata, data)
      })
    })
  }

  function getattainRealAreaInfo1() {
    axios.post('/hisPointCut/listCutAreaStatistic', {
      cutStartTime: state.options.queryList.querys[1].binddata[0],
      cutEndTime: state.options.queryList.querys[1].binddata[0],
      flag: 'A'
    }).then(res => {
      state.ayasObjData.oneList = res.data
      let data = res.data.map(item => {
        return {
          name: item.areaName,
          value: item.cutTotalNum
        }
      })
      nextTick(() => {
        chartBoxs = echarts.init(document.getElementById("chartBoxs"));
        setC3(data)
      })
    })
  }
  // 填写分析抽屉
  function lookBtn(row) {
    state.editId = row.id;
    state.fillayaComShow = dayjs().unix();
  }
  // 提交填写分析
  function submitFormfillayaCom(data) {
    let dataObj = {};
    dataObj.id = state.editId;
    dataObj.templateDto = data;
    if (data) {
      axios.post("/hisPointCut/modifyAnalysis", dataObj).then((res) => {
        proxy.$modal.msgSuccess(res.msg);
        state.fillayaComShow = false;
        proxy.$refs.zujiannametwo.getData({
          ...state.descObj
        });
      });
    } else {
      state.fillayaComShow = false;
    }
  }

  function listInfoBtnClick(type) {
    state.listBtnType = type;
    if (type == 1) {
      goPage();
    }
    if (type == 2) {
      if (store.records.length == 0 || store.records.length > 1) {
        ElMessage.error('请选择一个测点')
        state.listBtnType = undefined;
        return
      } else {
        state.showChart = !state.showChart
        state.chartData = {
          pointIds: [store.records[0].pointId],
          queryStartTime: store.records[0].cutStartTime,
          queryEndTime: store.records[0].cutEndTime,
        }
      }
    }
    if (type == 7) {
      getlistAlarmInfoStatistic()
      getattainRealAreaInfo2()
      getattainRealAreaInfo1()
    }
  }
  // 关闭统计数据
  const close = () => {
    state.listBtnType = undefined
  }
  // 编辑按钮
  function editBtn(row) {
    if (row.templateDto != null) {
      state.detailsShow = dayjs().unix();
    }
    state.detailsList = row.templateDto;
  }

  function cellClickEvent(row) {
    store.records=[]
    state.descObj.pointId = row.pointId
    state.data = {
      pointId: row.pointId,
      condition: state.typePoint,
    }
    let typevalue = state.descObj.condition != null && state.descObj.condition.includes("A") ? "A" : "D";
    if (typevalue == "A") {
      setTimeout(() => {
        state.optionstwo.tableheads = computed(
          () => table_headers.hisPointCutSimulateDetail
        );
        state.optionstwo.dataUrl = "/hisPointCut/getCutPointByPointId";
        proxy.$refs.zujiannametwo.getData({
          ...state.descObj
        });
      }, 300);
    } else {
      setTimeout(() => {
        state.optionstwo.tableheads = computed(
          () => table_headers.hisPointCutSwitchDetail
        );
        state.optionstwo.dataUrl = "/hisPointCut/getCutPointByPointId";
        proxy.$refs.zujiannametwo.getData({
          ...state.descObj
        });
      }, 300);
    }
  }

  function pagechange() {
    proxy.$refs.zujiannametwo.getData({
      ...state.descObj
    });
  }

  function query(type) {
    if (type.item && (type.item.field == "isShowLocal" || type.item.type=='datetimestartEnd')) {
      state.areaObj.type=type.item.type
      state.areaObj.isShowLocal = type.val
      getconditionList(state.areaObj)
    }
    if (type == 2) {
      proxy.$refs.zujiannametwo.state.tabledata = []
      getconditionList({})
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "calibrationStatus") {
          item.binddata = 3;
        }
      });
    }
    if (type.type == 4) {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "condition") {
          state.areaObj['condition'] = type.val
          item.binddata = type.val;
          let typevalue = type.val != null && type.val.includes("A") ? "A" : "D";
          state.typePoint = item.binddata;
          if (typevalue == "A") {
            setTimeout(() => {
              state.options.tableheads = computed(
                () => table_headers.hisPointCutSimulateStatistic
              );
              state.options.dataUrl = "/hisPointCut/listPointCuts";
              proxy.$refs.zujianname.getData({});
            }, 300);
          } else {
            setTimeout(() => {
              state.options.tableheads = computed(
                () => table_headers.hisPointCutSwitchStatistic
              );
              state.options.dataUrl = "/hisPointCut/listPointCuts";
              proxy.$refs.zujianname.getData({});
            }, 300);
          }
        }
      });
      getconditionList(state.areaObj);
    }
    if (type.type == 44) {
      state.options.queryList.querys.forEach((item) => {
        if (item.type == 'cascaderRadioSpecial') {
          if (item.binddata == '' || !item.binddata) {
            state.areaObj['areaName'] = type.val1
            getconditionList(state.areaObj);
          }
        }
      })
    }
    if (type.type == 5&& type.item.type!='datetimestartEnd') {
      let dataObj = {
        dateSuffix: undefined,
        classInfo: {},
      };
      state.options.queryList.querys.forEach((item) => {
        if (type.val1) {
          dataObj.dateSuffix = type.val1
          if (item.fieldsearch == "banci") {
            state.banciList.forEach((itemsub) => {
              if (itemsub.id == item.binddata) {
                dataObj.classInfo = itemsub;
                banciList(dataObj);
              }
            });
          }
        } else {
          if (item.fieldsearch == "datetime") {
            dataObj.dateSuffix = item.binddata;
          }
        }
        if (item.fieldsearch == "banci") {
          state.banciList.forEach((itemsub) => {
            if (type.val == 0) {
              type.val = state.banciList[0].id
            }
            if (itemsub.id == type.val) {
              dataObj.classInfo = itemsub;
              dataObj.typeLabel=2
              banciList(dataObj);
            }
          });
        }
      });
    }
    if (type.type == 'topConnectBom') {
      state.descObj = type.data
      proxy.$refs.zujiannametwo.state.tabledata = []
    }
    if (type == 1 && props.fromIndexpointId) {
      proxy.$refs.zujianname.getData()
    }
  }

  function getbanciList() {
    axios.post("/class/info/searchAll", {}).then((res) => {
      state.banciList = res.data.list;
      state.options.queryList.querys.forEach((item) => {
        if (item.fieldsearch == "banci") {
          item.options = res.data.list.map((item) => {
            return {
              label: item.className,
              value: item.id,
            };
          });
          item.binddata = item.options[0].value
        }
      });
    });
  }
  getbanciList();

  function banciList(dataObj) {
    axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if(dataObj.typeLabel!=2||state.options.queryList.querys[0].binddata==2){
          if (item.type == "datetimestartEnd") {
            item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
          }
        }
      });
    });
  }

  function getSelList() {
    axios.post("/hisPointFeed/listAllNames", {
      flag: false
    }).then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "condition") {
          item.options = res.data;
        }
      });
    });
    searchareaTree().then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "area") {
          item.options = res.data;
        }
      });
    });
  }

  function getconditionList(val) {
    console.log(val,"来自的时间组件")
    state.options.queryList.querys.forEach((item) => {
      if (item.type == "datetimestartEnd"&&val.type!='datetimestartEnd') {
        val.startTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss 000')
        val.endTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss 000')
      }
    });
    axios
      .post("/hisPointFeed/conditionList", val)
      .then((res) => {
        state.options.queryList.querys.forEach((item) => {
          if (item.type == "cascaderRadioSpecial") {
            item.options = res.data;
          }
        });
      });
  }
  getconditionList(state.areaObj)
  getSelList();

  onMounted(() => {
    if (props.fromIndexpointId) {
      state.options.queryList.querys.forEach((item) => {
        item.col = 24
        if (item.type == "cascaderRadioSpecial") {
          item.binddata = props.fromIndexpointId.pointId
          item.binddata1 = [props.fromIndexpointId.sensorName, props.fromIndexpointId.pointId, props
            .fromIndexpointId.place
          ]
          proxy.$refs['zujianname'].getData({pointId:props.fromIndexpointId.pointId})
          console.log("cascaderRadioSpecial")

        }
      });
    }
  });
  // 跳转实时断电异常页面
  const goPage = () => {
    router.push({
      name: "Lb_realCutList"
    });
  };
  // 关闭曲线
  const closeChart = () => {
    state.listBtnType = undefined
    state.showChart = false
  }
</script>
<style lang="scss" scoped>
  .xiazai {
    position: absolute;
    top: 42px;
    right: 110px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>